﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManagerialKeyBehaviourForm.aspx.cs"
    Inherits="Assesment.Web.Forms.Administration.Catalog.ManagerialKeyBehaviourForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>City Form</title>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.wrapper.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.msgBox.v1.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/chosen/chosen.jquery.min.js") %>" type="text/javascript"></script>
    <link href="<%= ResolveUrl("~/styles/chosen/chosen.min.css") %>" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript">

        $("#btnSave").button({ icons: { primary: "ui-icon-disk"} });
        $("#btnClose").button({ icons: { primary: "ui-icon-close"} });

        $('#btnClose').click(function () {
            parent.$('#dialog').dialog("close");
        });
 
    </script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#txtNama').focus();


            // 1. prepare the validation rules and messages.
            var rules = {
                ddlLokasi: "required",
                ddlJabatan: "required",
                ddlKompetensi: "required",
                ddlLevel: "required",
                ddlDepartemen: "required"

            };
            var messages = {
                ddlLokasi: "Lokasi  wajib di isi",
                ddlJabatan: "Jabatan  wajib di isi",
                ddlKompetensi: "Kompetensi  wajib di isi",
                ddlLevel: "Level  wajib di isi",
                ddlDepartemen: "Departemen wajib di isi"
            };

            //            $("#txtDescription").inputmask("Regex", { regex: "[A-Za-z-.0-9 ]*" });

            // 2. Initiate the validator
            var validator = new jQueryValidatorWrapper("form1", rules, messages);

            // 3. Set the click event to do the validation
            $("#btnSave").click(function () {

                if (!validator.validate())
                    return;

                var griddetail = $('#tabledetail');
                var selIdsdetail = griddetail.jqGrid('getGridParam', 'selarrrow'),
                selTextDetail = [];
                $.each(selIdsdetail, function () {
                    selTextDetail.push(griddetail.jqGrid('getCell', this, 'KeyBehaviourDetailID'));
                });

                if (selTextDetail == "") {
                    alert("Key Behaviour harus diisi satu atau lebih pilihan !");
                    return;
                }
                var jabatan = $("#ddlJabatan option:selected").val();
                var kompetensi = $("#ddlKompetensi option:selected").val();
                var level = $("#ddlLevel option:selected").val();
                var id = $('#<%= hfID.ClientID %>').val();

                var objrecManagerialKeyBehaviour = new Object();
                objrecManagerialKeyBehaviour.JobLevelID = id;
                objrecManagerialKeyBehaviour.PositionID = encodeURIComponent(jabatan);
                objrecManagerialKeyBehaviour.CompetencyID = encodeURIComponent(kompetensi);
                objrecManagerialKeyBehaviour.LevelCompetencyID = encodeURIComponent(level);
                objrecManagerialKeyBehaviour.KeyBehaviourDetailID = encodeURIComponent(selTextDetail);

               
                jsonData = JSON.stringify(objrecManagerialKeyBehaviour);

                var handlerUrl = '<%= ResolveUrl("~/ajaxhandler/administration/catalog/ManagerialKeyBehaviourhandler.ashx") %>';

                if (id == 0)
                    CallAjax(handlerUrl, "?method=insert", jsonData);
                else {
                    CallAjax(handlerUrl, "?method=update", jsonData);
                }

                parent.$('#dialog').dialog('close');

                setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                return false;
            });


            $('#ddlLokasi').change(function () {
                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/PositionLoadHandler.ashx") %>';
                var departmentID = $("#ddlDepartemen option:selected").val();
                var lokasiID = $("#ddlLokasi option:selected").val();

                if (departmentID != "" && lokasiID != "") {
                    var $ddlJabatan = $('#ddlJabatan');
                    $('#ddlJabatan').find('option:not(:first)').remove();
                    $.ajax({
                        type: 'POST',
                        url: handlerUrl + "?method=getpositionbydeptid&departmentID=" + departmentID + "&locationID=" + lokasiID,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (datas) {
                            $ddlJabatan.get(0).options[0] = new Option("-- pilih jabatan --", "");
                            $.each(datas, function (i, data) {
                                $ddlJabatan.append('<option value="' + data.PositionID + '">' + data.PositionName + '</option>');
                            });
                            $ddlJabatan.trigger('chosen:updated');
                        },
                        error: function () {
                            alert('Error load jabatan !');
                        }
                    });
                }
            });


            $('#ddlKompetensi').change(function () {
                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/LevelCompetencyLoad.ashx") %>';
                var comptID = $("#ddlKompetensi option:selected").val();
                if (comptID != "") {
                    var $ddlLevel = $('#ddlLevel');
                    $('#ddlLevel').find('option:not(:first)').remove();
                    $.ajax({
                        type: 'POST',
                        url: handlerUrl + "?method=getlevelcomptid&comptID=" + comptID,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (datas) {
                            $ddlLevel.get(0).options[0] = new Option("-- pilih level --", "");
                            $.each(datas, function (i, data) {
                                $ddlLevel.append('<option value="' + data.ID + '">' + data.Level + '</option>');
                            });

                        },
                        error: function () {
                            alert('Error load level  !');
                        }
                    });
                }
            });

            $('#ddlLevel').change(function () {

                var CompetencyID = $("#ddlKompetensi option:selected").val();
                var LevelCompetencyID = $("#ddlLevel option:selected").val();
                if (CompetencyID == "")
                    CompetencyID = 0;
                if (LevelCompetencyID == "")
                    LevelCompetencyID = 0;

                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Administration/Catalog/KeyBehaviourDetailHandler.ashx") %>';
                $("#tabledetail").jqGrid('setGridParam', { url: handlerUrl + '?method=getdata&CompetencyID=' + CompetencyID + "&LevelCompetencyID=" + LevelCompetencyID });
                $("#tabledetail").trigger("reloadGrid");

            });

        });
    
    </script>
    <script type="text/javascript">
        function ClearText() {
            $('#txtNama').val('');
        }
         
    </script>
</head>
<body onload="ClearText();">
    <form id="form1" runat="server">
    <table border="0">
        <tr>
            <td valign="top">
                Departemen
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlDepartemen" runat="server" Width="400px">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Lokasi
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlLokasi" runat="server" Width="400px">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Jabatan
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlJabatan" runat="server" Width="400px">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Kompetensi
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlKompetensi" runat="server" Width="400px">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Level Kompetensi
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlLevel" runat="server" Width="400px">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <asp:HiddenField ID="hfID" runat="server" />
            </td>
        </tr>
    </table>
    <table id="tabledetail" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pagerdetail" class="scroll">
    </div>
    <script type="text/javascript">

        var idsOfSelectedRows = [],
                updateIdsOfSelectedRows = function (id, isSelected) {
                    var index = $.inArray(id, idsOfSelectedRows);
                    if (!isSelected && index >= 0) {
                        idsOfSelectedRows.splice(index, 1); // remove id from the list
                    } else if (index < 0) {
                        idsOfSelectedRows.push(id);
                    }
                };


        loadLevelManagerial();

        var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Administration/Catalog/KeyBehaviourDetailHandler.ashx") %>';
        var CompetencyID = $("#ddlKompetensi option:selected").val();
        var LevelCompetencyID = $("#ddlLevel option:selected").val();
        if (CompetencyID == "")
            CompetencyID = 0;
        if (LevelCompetencyID == "")
            LevelCompetencyID = 0;

        $('#tabledetail').jqGrid({
            url: handlerUrl + '?method=getdata&CompetencyID=' + CompetencyID + "&LevelCompetencyID=" + LevelCompetencyID,
            datatype: 'json',
            colNames: ['ID', 'Key Behaviour'],
            colModel: [
                { name: 'KeyBehaviourDetailID', key: true, hidden: true, index: 'KeyBehaviourDetailID', width: 60 },
                { name: 'KeyBehaviourName', index: 'KeyBehaviourName', align: 'left', width: 200, searchoptions: { sopt: ['cn', 'eq']} }

           	],
            rownumbers: true,
            rowNum: 10,
            id: 'KeyBehaviourDetailID',
            multiselect: true,
            rowList: [5, 10, 15, 20],
            pager: '#pagerdetail',
            sortname: 'KeyBehaviourName',
            sortorder: "asc",
            viewrecords: true,
            jsonReader: { repeatitems: false },
            width: 700,
            height: '100%',
            caption: 'Key Behaviour',
            excel: true,
            ajaxGridOptions: { cache: false }
            ,
             onSelectRow: updateIdsOfSelectedRows,
                onSelectAll: function (aRowids, isSelected) {
                    var i, count, id;
                    for (i = 0, count = aRowids.length; i < count; i++) {
                        id = aRowids[i];
                        updateIdsOfSelectedRows(id, isSelected);
                    }
                },
                loadComplete: function () {
                    var $this = $(this), i, count;
                    for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
                        $this.jqGrid('setSelection', idsOfSelectedRows[i], false);
                    }
                }
        });

        $("#table").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, searchtext: 'Search', refreshtext: 'Refresh' },
        {}, {}, {}, { closeOnEscape: true, multipleSearch: false, closeAfterSearch: true });


        function loadLevelManagerial() {
            var id = $('#<%= hfID.ClientID %>').val();
            var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/LoadData/Administration/Catalog/ManagerialKeyBehaviourDetailLoad.ashx") %>';
            if (id != "") {
                $.ajax({
                    type: 'POST',
                    url: handlerUrl + "?method=getbykeyManagerialKeyBehaviourID&ManagerialKeyBehaviourID=" + id,
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (datas) {
                        $.each(datas, function (i, data) {
                            idsOfSelectedRows.push(data.KeyBehaviourDetailID);
                        });

                    },
                    error: function () {
                        alert('Error load load Level Managerial  !');
                    }
                });
            }
        }
    
    </script>
    <div style="text-align: right; padding-top: 10px;">
        <button id="btnSave" type="button">
            Save</button>
        <button id="btnClose" type="button">
            Close</button>
    </div>
    </form>
</body>
</html>
